<template>
  <div class="w-100p">
    <u-input :value="inputValue" :placeholder-style="placeholderStyle" :custom-style="inputStyle"
      :placeholder="placeholder" @click="show = true" type="select" />

    <u-popup mode="bottom" v-model="show">
      <view class="popup-content">
        <view class="u-flex u-row-between u-p-b-30">
          <u-button :hair-line="false" :custom-style="cancelStyle" throttle-time="500" @click="cancel">取消</u-button>
          <u-button :hair-line="false" :custom-style="submitStyle" throttle-time="500" @click="submit">确定</u-button>
        </view>
        <view class="u-p-b-20">
          <u-search :placeholder="placeholder" v-model="filterText" shape="square" bg-color="#E5EAE8" height="80"
            :show-action="true" :animation="true" :input-style="{ marginLeft: '20rpx' }" :search-icon="searchIcon"
            placeholder-color="#999999" :action-style="{
              color: '#369164',
              fontSize: '14px',
              fontWeight: '400',
            }"></u-search>
        </view>
        <scroll-view scroll-y="true" style="height: 600rpx">
          <view class="w-100p checkbox">
            <u-checkbox-group active-color="#9AC8B1" width="100%" :wrap="true">
              <u-checkbox @change="checkChange" v-model="item.checked" class="checkbox-item"
                v-for="(item, index) in filterList" :key="index" :name="item.dataCode">{{ item.name
                }}</u-checkbox>
            </u-checkbox-group>
            <template v-if="filterList.length === 0">
              <view class="c-empty p-absolute-center">
                <u-empty text="暂无数据"></u-empty>
              </view>
            </template>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </div>
</template>
<script>
export default {
  naem: 'bSelect',
  props: {
    placeholder: String,
    placeholderStyle: String,
    inputStyle: Object,
    cancelStyle: Object,
    submitStyle: Object,
    searchIcon: String,
    options: {
      type: Array,
      default: () => []
    },
    value: String
  },
  data () {
    return {
      inputValue: '',
      show: false,
      filterText: '',
      checkList: [],
    }
  },
  watch: {
    options (val) {
      if (val && this.value) {
        let textList = []
        val.forEach(item => {
          if (this.value.includes(item.dataCode)) {
            textList.push(item.name)
            this.checkList.push(item.dataCode)
            this.$set(item, 'checked', true)
          }
        })
        this.inputValue = textList.toString()
      }
    },
    value (val) {
      if (val && this.options) {
        let textList = []
        this.options.forEach(item => {
          if (val.includes(item.dataCode)) {
            textList.push(item.name)
            this.checkList.push(item.dataCode)
            this.$set(item, 'checked', true)
          }
        })
        this.inputValue = textList.toString()
      } else {
        this.inputValue = ''
        this.$emit('input', '')
      }
    }
  },
  computed: {
    filterList () {
      return this.options.filter(item => {
        if (this.filterText) {
          return item?.name.includes(this.filterText) || item?.pinyin_code.includes(this.filterText.toUpperCase())
        }
        return true
      })
    },
  },
  methods: {
    checkChange (e) {
      if (e.value === true) {
        this.checkList.push(e.name)
      } else {
        for (let i = 0; i < this.checkList.length; i++) {
          if (this.checkList[i] === e.name) {
            this.checkList.splice(i, 1)
          }
        }
      }
    },
    submit () {
      let textList = []
      this.options.forEach(item => {
        if (this.checkList.includes(item.dataCode)) {
          textList.push(item.name)
        }
      })
      this.inputValue = textList.toString()
      this.$emit('input', this.checkList.toString())
      this.show = false
    },
    cancel () {
      this.options.forEach(item => {
        if (this.value.includes(item.dataCode)) {
          this.checkList.push(item.dataCode)
        }
      })
      this.filterText = ''
      this.show = false
    }
  },
}
</script>
<style lang="scss" scoped>
.popup-content {
  padding: 24rpx;
  text-align: center;

  .checkbox {
    &-item {
      height: 100rpx;
    }

    /deep/.u-checkbox-group {
      display: inline;

      .u-checkbox {
        border-bottom: 1px solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;

        .u-checkbox__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
      }
    }

    /deep/.u-radio-group {
      display: inline;

      .u-radio {
        border-bottom: 1px solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;

        .u-radio__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
      }
    }
  }
}
</style>